<template>
  <div class="app-container profile-container">
    <el-row :gutter="24">
      <!-- 左侧个人信息卡片 -->
      <el-col :span="7" :xs="24">
        <el-card class="profile-card user-card" shadow="hover">
          <div class="user-header">
            <div class="avatar-wrapper">
              <userAvatar :user="user" />
            </div>
            <div class="user-name-wrapper">
              <h2 class="user-name">{{ user.nickName || user.userName }}</h2>
              <div class="user-role">{{ roleGroup }}</div>
            </div>
          </div>
          
          <div class="info-divider"></div>
          
          <div class="user-info-list">
            <div class="info-item">
              <svg-icon icon-class="user" class="info-icon" />
              <span class="info-label">账号</span>
              <span class="info-value">{{ user.userName }}</span>
            </div>
            <div class="info-item">
              <svg-icon icon-class="phone" class="info-icon" />
              <span class="info-label">手机</span>
              <span class="info-value">{{ user.phonenumber || '未设置' }}</span>
            </div>
            <div class="info-item">
              <svg-icon icon-class="email" class="info-icon" />
              <span class="info-label">邮箱</span>
              <span class="info-value">{{ user.email || '未设置' }}</span>
            </div>
            <div class="info-item">
              <svg-icon icon-class="tree" class="info-icon" />
              <span class="info-label">部门</span>
              <span class="info-value">{{ user.dept ? user.dept.deptName : '未分配' }}</span>
            </div>
            <div class="info-item">
              <svg-icon icon-class="date" class="info-icon" />
              <span class="info-label">创建</span>
              <span class="info-value">{{ formatDate(user.createTime) }}</span>
            </div>
            <div class="info-item">
              <svg-icon icon-class="peoples" class="info-icon" />
              <span class="info-label">岗位</span>
              <span class="info-value">{{ postGroup || '未分配' }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧信息编辑区域 -->
      <el-col :span="17" :xs="24">
        <el-card class="profile-card edit-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>个人资料</span>
          </div>
          
          <el-tabs v-model="activeTab" class="profile-tabs">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
        
        <!-- 最近活动区域 -->
        <el-card class="profile-card activity-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>最近活动</span>
            <el-button type="text" class="activity-refresh" @click="refreshActivities">
              <i class="el-icon-refresh"></i> 刷新
            </el-button>
          </div>
          
          <div class="activity-empty" v-if="!activities.length">
            <el-empty description="暂无活动记录"></el-empty>
          </div>
          
          <el-timeline v-else>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.time"
              :color="activity.color"
              :type="activity.type"
              size="large"
            >
              <div class="activity-content">{{ activity.content }}</div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: "",
      postGroup: "",
      activeTab: "userinfo",
      activities: [
        {
          content: "登录系统",
          time: this.formatTime(new Date()),
          color: "#409EFF",
          type: "primary"
        }
      ]
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    formatDate(dateString) {
      if (!dateString) return "未设置";
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    formatTime(date) {
      return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    refreshActivities() {
      // 模拟刷新活动
      this.activities = [
        {
          content: "登录系统",
          time: this.formatTime(new Date()),
          color: "#409EFF",
          type: "primary"
        }
      ];
      this.$message.success("活动记录已刷新");
    }
  }
};
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  
  .profile-card {
    margin-bottom: 20px;
    border-radius: 8px;
    transition: all 0.3s;
    border: none;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
      font-weight: 500;
      color: #303133;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    &.user-card {
      .user-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        
        .avatar-wrapper {
          margin-bottom: 16px;
        }
        
        .user-name-wrapper {
          text-align: center;
          
          .user-name {
            font-size: 20px;
            color: #303133;
            margin: 0 0 8px 0;
            font-weight: 500;
          }
          
          .user-role {
            color: #909399;
            font-size: 14px;
            background-color: #f0f2f5;
            padding: 4px 12px;
            border-radius: 16px;
          }
        }
      }
      
      .info-divider {
        height: 1px;
        background-color: #ebeef5;
        margin: 16px 0;
      }
      
      .user-info-list {
        padding: 0 16px;
        
        .info-item {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          
          .info-icon {
            width: 20px;
            height: 20px;
            color: #409EFF;
            margin-right: 8px;
          }
          
          .info-label {
            width: 45px;
            color: #606266;
            font-size: 14px;
            font-weight: 500;
          }
          
          .info-value {
            flex: 1;
            color: #303133;
            font-size: 14px;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    
    &.edit-card {
      .profile-tabs {
        padding: 20px;
      }
    }
    
    &.activity-card {
      .activity-refresh {
        color: #409EFF;
        
        &:hover {
          color: #66b1ff;
        }
        
        i {
          margin-right: 4px;
        }
      }
      
      .activity-empty {
        margin: 30px 0;
      }
      
      .activity-content {
        font-size: 14px;
        color: #303133;
        font-weight: 500;
        background-color: #f9f9f9;
        padding: 10px 15px;
        border-radius: 6px;
        margin-bottom: 5px;
      }
      
      .el-timeline {
        padding: 20px;
      }
    }
  }
}

@media (max-width: 768px) {
  .profile-container {
    padding: 10px;
    
    .user-card {
      margin-bottom: 20px;
    }
  }
}
</style>
